<script setup>
import {onMounted, reactive, ref} from "vue";
import {blockingUserStatusService, liftingUserStatusService, pageUserListService} from "@/api/user.js";
import {ElMessage, ElMessageBox} from "element-plus";

const params = reactive({
  current: 1,
  size: 10,
  phoneNumber: "",
  nickName: "",
})

const totalSize = ref(0)
const userInfoList = ref([])

async function handlePageChange() {
  const result = await pageUserListService(params)
  userInfoList.value = result.data.records
  totalSize.value = result.data.total
}

onMounted(async () => {
  await handlePageChange()
})

async function onBlockingUserStatus(phoneNumber) {
  try {
    await ElMessageBox.confirm(
        '确定要拉黑该用户吗?',
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
    )
    const blockForm = reactive({
      phoneNumber: phoneNumber
    })
    await blockingUserStatusService(blockForm)
    await handlePageChange()
    ElMessage.success("拉黑该用户成功")
  } catch (error) {
    if (error === "cancel") {
    }
  }
}

async function onLiftingUserStatus(phoneNumber) {
  try {
    await ElMessageBox.confirm(
        '确定要解禁该用户吗?',
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
    )
    const blockForm = reactive({
      phoneNumber: phoneNumber
    })
    await liftingUserStatusService(blockForm)
    await handlePageChange()
    ElMessage.success("解禁该用户成功")
  } catch (error) {
    if (error === "cancel") {
    }
  }
}

function handleSizeChange() {
  params.current = 1
  handlePageChange()
}

function handleCurrentChange() {
  handlePageChange()
}

function onSearchAccount() {
  if (params.phoneNumber.toString().trim() === "") {
    ElMessage({
      message: '请输入要搜索用户手机号（账户），再进行查询！',
      type: 'warning',
    })
    return;
  }
  params.current = 1
  handlePageChange()
}

function onSearchNickName() {
  if (params.phoneNumber.toString().trim() === "") {
    ElMessage({
      message: '请输入要搜索用户昵称，再进行查询！',
      type: 'warning',
    })
    return;
  }
  params.current = 1
  handlePageChange()
}

function onReset() {
  params.current = 1
  params.size = 10
  params.phoneNumber = ""
  params.nickName = ""
  handlePageChange()
}
</script>

<template>
  <!-- 表单 -->
  <el-form inline="true">
    <el-form-item label="用户手机号（账户）">
      <el-input v-model="params.phoneNumber" @keydown.enter="onSearchAccount" placeholder="请您输入要搜索的内容"/>
    </el-form-item>
    <el-form-item label="用户昵称">
      <el-input v-model="params.nickName" @keydown.enter="onSearchNickName" placeholder="请您输入要搜索的内容"/>
    </el-form-item>
    <el-form-item>
      <el-button @click="onReset" plain type="info">重置</el-button>
    </el-form-item>
  </el-form>
  <!-- 表格 -->
  <el-table height="700px" :data="userInfoList">
    <el-table-column prop="id" label="用户id" width="180px"/>
    <el-table-column prop="phoneNumber" width="150px" label="用户手机号（账户）"/>
    <el-table-column prop="nickName" label="用户昵称" width="150px"/>
    <el-table-column prop="headShot" label="用户头像" width="100px">
      <template #default="{ row }">
        <el-image
            :src="row.headShot"
            style="width: 50px; height: 50px; border-radius: 50%; object-fit: cover;"
            alt="用户头像"/>
      </template>
    </el-table-column>
    <el-table-column prop="sex" label="性别">
      <template #default="{ row }">
        <div v-if="row.sex === 0" style="color:#3EC8FF;">男</div>
        <div v-else-if="row.sex === 1" style="color:#FD4C40;">女</div>
        <div v-else="row.sex === 2" style="color:#79797a;">未知</div>
      </template>
    </el-table-column>
    <el-table-column prop="email" width="200px" label="邮箱"/>
    <el-table-column prop="wechat" width="120px" label="微信号"/>
    <el-table-column prop="school" width="100px" label="学校"/>
    <el-table-column prop="professional" width="150px" label="专业"/>
    <el-table-column prop="status" width="90px" label="用户状态">
      <template #default="{ row }">
        <el-tag type="success" v-if="row.status === 0">正常</el-tag>
        <el-tag type="error" v-else>拉黑</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="80px" fixed="right">
      <template #default="{ row }">
        <el-button class="red" v-if="row.status === 0" type="text" plain
                   @click="onBlockingUserStatus(row.phoneNumber)">拉黑
        </el-button>
        <el-button v-if="row.status === 1" type="text" plain
                   @click="onLiftingUserStatus(row.phoneNumber)">解禁
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页区域 -->
  <el-pagination background size="small" layout="total, sizes, prev, pager, next, jumper"
                 :total="totalSize"
                 v-model:current-page="params.current"
                 v-model:page-size="params.size"
                 :page-sizes="[1, 5, 10, 15, 20]"
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"/>
</template>

<style scoped>
</style>